<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/fn"%>
<%@ taglib prefix="cfn" uri="http://com.abou/cfn"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ include file="../../constants.jsp"%>
<%@page import="com.abou.constant.product.*"%>

<%-- Prints, if necessary, the list of the error message linked to the field denoted
      by the passed path. Parameters are :
  - mandatory : optional, boolean string value, 'true' if the field is mandatory.

 --%>

<c:set var="productTypes" value="<%= EProductType.values() %>"
	scope="request" />
<jsp:include page="/WEB-INF/jsp/common/form/form-field-select.jsp">
	<jsp:param name="code" value="field.product.type" />
	<jsp:param name="path" value="productType" />
	<jsp:param name="valuesVarName" value="productTypes" />
	<jsp:param name="fixedWidth" value="true" />
	<jsp:param name="mandatory" value="true"/>
	<jsp:param name="onchange" value="showProductTypes(this.value);"/>
</jsp:include>

<div id="productFeatures">

<%--
	<c:set var="productTypes" value="<%= ECategory.values() %>"
		scope="request" />
	<jsp:include page="/WEB-INF/jsp/common/form/form-field-select.jsp">
		<jsp:param name="code" value="field.product.category" />
		<jsp:param name="path" value="category" />
		<jsp:param name="valuesVarName" value="productTypes" />
		<jsp:param name="fixedWidth" value="true" />
	    <jsp:param name="mandatory" value="${param.mandatory}"/>
	    <jsp:param name="onchange" value="showProductTypes(this.value)"/>
	</jsp:include>
 --%>

	<div id="GIRL" style="display:none" class="clotheType">
		<c:set var="productTypes" value="${cfn:getEClotheTypes( ECategory_GIRL )}"
			scope="request" />
		<jsp:include page="/WEB-INF/jsp/common/form/form-field-select.jsp">
			<jsp:param name="code" value="field.product.clothe.type" />
			<jsp:param name="path" value="clotheType" />
			<jsp:param name="id" value="clotheType_GIRL" />
			<jsp:param name="valuesVarName" value="productTypes" />
			<jsp:param name="fixedWidth" value="true" />
		    <jsp:param name="mandatory" value="${param.mandatory}"/>
		</jsp:include>
	</div>

	<div id="WOMAN" style="display:none" class="clotheType">
		<c:set var="productTypes" value="${cfn:getEClotheTypes( ECategory_WOMAN )}"
			scope="request" />
		<jsp:include page="/WEB-INF/jsp/common/form/form-field-select.jsp">
			<jsp:param name="code" value="field.product.clothe.type" />
			<jsp:param name="path" value="clotheType" />
			<jsp:param name="id" value="clotheType_WOMAN" />
			<jsp:param name="valuesVarName" value="productTypes" />
			<jsp:param name="fixedWidth" value="true" />
		    <jsp:param name="mandatory" value="${param.mandatory}"/>
		</jsp:include>
	</div>

	<div id="BOY" style="display:none" class="clotheType">
		<c:set var="productTypes" value="${cfn:getEClotheTypes( ECategory_BOY )}"
			scope="request" />
		<jsp:include page="/WEB-INF/jsp/common/form/form-field-select.jsp">
			<jsp:param name="code" value="field.product.clothe.type" />
			<jsp:param name="path" value="clotheType" />
			<jsp:param name="id" value="clotheType_BOY" />
			<jsp:param name="valuesVarName" value="productTypes" />
			<jsp:param name="fixedWidth" value="true" />
		    <jsp:param name="mandatory" value="${param.mandatory}"/>
		</jsp:include>
	</div>

	<div id="MAN" style="display:none" class="clotheType">
		<c:set var="productTypes" value="${cfn:getEClotheTypes( ECategory_MAN )}"
			scope="request" />
		<jsp:include page="/WEB-INF/jsp/common/form/form-field-select.jsp">
			<jsp:param name="code" value="field.product.clothe.type" />
			<jsp:param name="path" value="clotheType" />
			<jsp:param name="id" value="clotheType_MAN" />
			<jsp:param name="valuesVarName" value="productTypes" />
			<jsp:param name="fixedWidth" value="true" />
		    <jsp:param name="mandatory" value="${param.mandatory}"/>
		</jsp:include>
	</div>

	<%-- 	--%>
	<c:set var="productSizes" value="<%= ESize.values() %>"
		scope="request" />
	<jsp:include page="/WEB-INF/jsp/common/form/form-field-select.jsp">
		<jsp:param name="code" value="field.product.size" />
		<jsp:param name="path" value="sizes" />
		<jsp:param name="type" value="box" />
		<jsp:param name="multiple" value="true" />
		<jsp:param name="valuesVarName" value="productSizes" />
		<jsp:param name="fixedWidth" value="true" />
	    <jsp:param name="mandatory" value="${param.mandatory}"/>
	</jsp:include>


	<c:set var="productColors" value="<%= EColor.values() %>"
		scope="request" />
	<jsp:include page="/WEB-INF/jsp/common/cmp/color-chooser.jsp">
		<jsp:param name="code" value="field.product.color" />
		<jsp:param name="path" value="colors" />
		<jsp:param name="valuesVarName" value="productColors" />
		<jsp:param name="fixedWidth" value="true" />
	    <jsp:param name="mandatory" value="${param.mandatory}"/>
	</jsp:include>

	<%-- The makeup field--%>
	<jsp:include page="/WEB-INF/jsp/common/form/form-field-limited-text-area.jsp">
		<jsp:param name="code" value="field.product.makeup" />
		<jsp:param name="path" value="makeup" />
		<jsp:param name="rows" value="5" />
		<jsp:param name="cols" value="23" />
		<jsp:param name="mandatory" value="true"/>
		<jsp:param name="limit" value="200"/>
		<jsp:param name="id" value="makeup"/>
	</jsp:include>

</div>

<script type="text/javascript" charset="UTF-8" src="${jsFolder}routines.js"></script>
<script type="text/javascript">
  $(document).ready(function() {

	  // default value to be shown
	  showProductTypes($("#productType").val());

	  /*
	  * modifying the clothe type field before sending to the server
	  * getting the visible one (because several form elements with the
      * same name : 'clotheType' were sent to the server)
	  */
	  $('#${param.formId}').submit(function() {

		  var clotheTypeVal = null;
		  var cat = null;
		  $(".clotheType").each(function(index) {

			  var id = $(this).attr("id");

			  //getting the value from the visible select field
			  if($(this).css('display') == 'block'){
				  clotheTypeVal = $(this).find("select#clotheType").val();
				  cat = id;
			  }

			  // removing the input element
			  $("#" + id ).remove();
		  });

		  if(clotheTypeVal != null=
		  {
		  //creating an hidden iput with the right value to be sent
		  $("#${param.formId}").append("<input type='hidden' value="+ clotheTypeVal +
				  " name='clotheType' id='clotheType'>");

		  //creating an hidden iput with the right value to be sent
		  $("#${param.formId}").append("<input type='hidden' value="+ cat +
				  " name='category' id='category'>");
		  }
		  return true;
		});
  });
</script>